<template>
  <div class="check-box-wrapper" @click.stop="checkCurrentBox()">
    <span class="left-check-icon" :class="{'check-left-check-icon':isChecked}"></span>
    <p class="right-text">{{checkDataItem.selectName}}</p>
  </div>
</template>

<script type="text/ecmascript-6">
  import Vue from 'vue'
  export default {
    props: {
      checkDataItem: {
        type: Object,
        default: null
      },
      isTotal: {
        type: Boolean,
        default:false
      }
    },
    data() {
      return {
        isChecked: false
      }
    },
    watch:{
      isTotal(val){
        if(val){
          this.checkDataItem.checked = false;
          this.isChecked = false;
        }
      }
    },
    mounted(){

    },
    methods: {
      checkCurrentBox(){
        //Vue.set(this.checkDataItem, 'checked', true)
        if(this.isTotal){
          return;
        }
        this.checkDataItem.checked = !this.checkDataItem.checked
        console.log(this.checkDataItem.checked)
        this.isChecked = this.checkDataItem.checked
        this.$emit('chooseTotal',this.isChecked)
      }
    }
  }
</script>

<style>
  .left-check-icon {
    width: 14px;
    height: 14px;
    display: inline-block;
    background-image: url("no_checkmark.png");
  }

  .check-left-check-icon {
    width: 14px;
    height: 14px;
    display: inline-block;
    background-image: url("checkmark.png");
  }

  .right-text {
    display: inline-block;
    margin-left: 6px;
  }

  .check-box-wrapper {
    height: 30px;
    line-height: 30px;
    cursor:pointer;
  }

</style>
